<template>
  <div class="mod-config">
    <el-tabs v-model="activeName" type="border-card" :before-leave="beforeTabLeave" >
          <el-tab-pane name="info" label="评价信息">
            <el-table
              :data="dataList"
              border
              v-loading="dataListLoading"
              style="width: 100%;">
              <el-table-column
                prop="teacherId"
                header-align="center"
                align="center"
                label="教师id">
              </el-table-column>
              <el-table-column
                prop="name"
                header-align="center"
                align="center"
                label="教师">
              </el-table-column>
              <el-table-column
                prop="semester"
                header-align="center"
                align="center"
                label="学期">
              </el-table-column>
              <el-table-column
                prop="levelAvg"
                header-align="center"
                align="center"
                label="评分">
              </el-table-column>
            </el-table>
            <el-pagination
              @size-change="sizeChangeHandle"
              @current-change="currentChangeHandle"
              :current-page="pageIndex"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pageSize"
              :total="totalPage"
              layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>
            <!-- 弹窗, 新增 / 修改 -->
            <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
          </el-tab-pane>
          <el-tab-pane name="echarts" label="top榜">
            <div id="myChart" v-if="showTopVisible" :style="{width: '500px', height: '500px',margin:'10px auto'}"></div>
          </el-tab-pane>
    </el-tabs>
    
    
  </div>

</template>

<script>
import { evaluationteachingApi } from '@/api/teacher'
import { clone } from '@/utils'
import AddOrUpdate from './evaluationteaching-add-or-update'
  export default {
    data () {
      return {
        dataForm: {
          key: ''
        },
        activeName:'info',
        showTopVisible:false,
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],
        addOrUpdateVisible: false
      }
    },
    components: {
      AddOrUpdate
    },
    mounted () {
      this.getDataList()
      this.drawLine()
    },
    methods: {
      // 获取数据列表
      getDataList () {
        this.dataListLoading = true
        let params = {
        pageSize: 10,
          limit:this.pageSize,
          page:this.pageIndex
        }
        evaluationteachingApi.t
        evaluationteachingApi.list(params).then(({page}) => {
        
            this.dataList = page.list
            this.totalPage = page.totalCount
          
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      beforeTabLeave(ac) {

      },
      drawLine(){
        this.showTopVisible=true

        let xData=[]
        let yData = []
        evaluationteachingApi.top()
        .then(({data})=>{
          clone(data).forEach(element => {
            xData.push(element.name)
            yData.push(element.levelAvg)
          });
          return
        }).then(()=>{
          let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        let option = {
         
          tooltip: {},
          xAxis: {
            type: 'category',
            data: xData
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: yData,
              type: 'bar',
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
              }
            }
          ]
        }
        myChart.setOption(option);
        })
        // 基于刚刚准备好的 DOM 容器，初始化 EChart 实例
        
    }
     
    }
  }
</script>
